<div id="detail-view" class="modal detail-view">
  <!-- ko if: messageEntity() && conversationEntity() -->
    <div class="detail-view-content modal-content-anim-close" data-bind="css: {'modal-content-anim-open': imageVisible()}">
      <header class="detail-view-header">
          <div class="text-center">
            <div class="label-bold-xs" data-bind="text: messageEntity().sender_name(), attr: {'data-uie-uid': messageEntity().user().id, 'data-uie-value': messageEntity().user().name}" data-uie-name="fullscreen-picture-sender"></div>
            <div class="label-xs" data-bind="text: moment(messageEntity().timestamp()).format('DD/MM/YYYY H:mm'), attr: {'data-timestamp': messageEntity().timestamp()}"></div>
          </div>
        <span class="detail-view-header-close-button icon-close icon-button" data-bind="click: clickOnClose" data-uie-name="do-close-detail-view"></span>
      </header>
      <div class="detail-view-main" data-bind="click: clickOnClose">
        <img class="detail-view-image" data-bind="attr: {src: imageSrc()}" data-uie-name="status-picture"/>
      </div>
      <footer class="detail-view-footer">
        <!-- ko if: messageEntity().is_downloadable() && !messageEntity().is_ephemeral() -->
          <span class="detail-view-action-button" data-bind="click: clickOnDownload" data-uie-name="do-download-fullscreen-picture">
            <span class="icon-download"></span>
            <span data-bind="l10n_text: z.string.conversationContextMenuDownload"></span>
          </span>
        <!-- /ko -->
        <!-- ko if: messageEntity().is_reactable() && !conversationEntity().removed_from_conversation() -->
          <span class="detail-view-action-button" data-bind="click: clickOnLike" data-uie-name="do-like-fullscreen-picture">
            <span data-bind="css: messageEntity().is_liked() ? 'icon-liked text-red' : 'icon-like'"></span>
            <span data-bind="l10n_text: z.string.conversationContextMenuLike"></span>
          </span>
        <!-- /ko -->
        <!-- ko if: messageEntity().is_deletable() -->
          <span class="detail-view-action-button" data-bind="click: clickOnDelete" data-uie-name="do-delete-fullscreen-picture">
            <span class="icon-delete-for-me"></span>
            <span data-bind="l10n_text: z.string.conversationContextMenuDelete"></span>
          </span>
        <!-- /ko -->
        <!-- ko if: messageEntity().user().is_me && messageEntity().status() !== z.message.StatusType.SENDING && !conversationEntity().removed_from_conversation() -->
          <span class="detail-view-action-button" data-bind="click: clickOnDeleteForEveryone" data-uie-name="do-delete-everywhere-fullscreen-picture">
            <span class="icon-delete-for-everyone"></span>
            <span data-bind="l10n_text: z.string.conversationContextMenuDeleteEveryone"></span>
          </span>
        <!-- /ko -->
      </footer>
    </div>
  <!-- /ko -->
</div>
